<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/tt.css">
</head>
<body>
<div class="top">
    <span class="top-left">下载APP</span>
    <span class="top-left"> 北京         晴天</span>
    <span class="top-right">更多产品</span>
</div>

<div class="container">

    <div class="left">
        <a>
            <img src="img/logo.png"><br/>
        </a>

        <ul>
            <li>
                <a class="channel-item active" href="#">
                    <span>
                        推荐
                    </span>
                </a>
            </li>

            <li><a class="channel-item" href="#">
                <span>
                    视频
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    热点
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    直播
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    图片
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    娱乐
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    游戏
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    体育
                </span>
            </a></li>

        </ul>

    </div>
    <div class="center">
        <ul class="news_list">
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实11”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实22”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实33”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实44”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实55”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实66”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实77”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实88”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实99”
                        <hr>
                    </a>
                </div>
            </li>
            <li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
                        <hr>
                    </a>
                </div>
            </li>
        </ul>

        <div class="loading" style="text-align: center; height: 80px">
            <img src="img/loading2.gif" height="100%">
        </div>
		<div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination"></div>
            </div>
        </div>
		
        <div id="no" style="text-align: center;color: red;font-size: 20px"></div>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //定义修正量
    let offset = 20;
    //定义一个变量，保存页码
    let pageNum = 0;
    //定义一个标记，当正在加载数据时，屏蔽判断操作
    let canLoad =true;
    //监听窗口的滚动
        $(window).scroll(function(){
            if (canLoad){
                //获取文档高度
                let docH=$(document).height();
                //获取窗体高度
                let winH = $(window).height();
                //获取滚动的距离
                let scrollH=$(window).scrollTop();
                //当文档高度<=窗口高度+滚动距离+修正量(20px)-->加载下一页数据
                if (docH<=winH+scrollH+offset){
                    canLoad=false;
                    //加载下一页数据(异步请求)
                    pageNum++;//下一页
                    $.get("/newsServlet",{pageNum:pageNum},function(data){
                        // alert(pageNum);
                        // console.log(data);
                        let newss = data.list;
                        if (newss!=null&&newss.length!=0){
                            //填充数据
                            $.each(data.list,function () {
                                $(".news_list").append(" <li>\n" +
                                    "                <div class=\"title-box\">\n" +
                                    "                    <a href=\"#\" class=\"link\">\n" +
                                    "                        "+this.title+"\n"+
                                    "                        <hr>\n" +
                                    "                    </a>\n" +
                                    "                </div>\n" +
                                    "            </li>")

                            });
                            //将屏蔽标志置回
                            canLoad=true;
                        }else {
                            //隐藏loding
                            $(".loading").hide();
                            //提示信息，我也是有底线的
                            $("#no").html("我也是有底线的")
                        }
                    },"json");
                }
            }
        });

                
           
</script>
</html>